<template>
    <div id='detailbuy'>
        <header1></header1>
            <div class="total_count">全部商品<em>{{total_count}}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <ul class="cart_list_td clearfix" v-for="sku in cart" :key="sku.id">
        <li class="col01"><input type="checkbox" name="ids" v-model="sku.is_checked" @click="update_selected(sku)" :value="sku.id"></li>
        <li class="col02"><img :src="sku.image_url"></li>
        <li class="col03">{{ sku.name }}</li>
        <li class="col05">{{ sku.price }}元</li>
        <li class="col06">
            <div class="num_add">
                <a @click="on_add(sku)" class="add fl">+</a>
                <input v-model="sku.number"  type="text" class="num_show fl">
                <a @click="on_del(sku)" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07">{{sku.price * sku.number}}元</li>
        <li class="col08"><a @click="on_delete(sku)">删除</a></li>
    </ul>

    <ul class="settlements">
        <li class="col01"></li>
        <li class="col02"></li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{total_selected_amount}}</em><br>共计<b>{{total_selected_count}}</b>件商品</li>
        <li class="col04"><button @click='confirm_pay'>去结算</button></li>
    </ul>
    <footer1></footer1>
    {{cart_checked}}
    </div>
</template>

<script>
import Header1 from '@/components/Header'
import Footer1 from '@/components/Footer'
import {send} from '../../static/js/oss.js'
import {create_cart_buy,update_cart,delete_cart,send_buy_info}  from "./axios_api/api.js"
export default{
    name:'detailbuy',
    components:{
		header1:Header1,
		footer1:Footer1
    },
    data:function(){
        return{
            cart:[],
            total_count:0,
            total_selected_amount:0,
            total_selected_count:0,
            cart_checked:[]//初始一个列表，所有选中的id
        }
    },
    computed:{
        getCartlist:function(){
            
    },
    },
    methods:{
        on_add(sku){
            sku.number+=1
			var data = {"id":sku.id,"number":sku.number}
            update_cart(data).then(res=>{
                console.log(res)
            this.total_selected_amount = sku.number*sku.price
            })
        },
        on_del(sku){
             if(sku.number>1){
                sku.number-=1
                var data = {"id":sku.id,"number":sku.number}
                update_cart(data).then(res=>{
                console.log(res)
                this.total_selected_amount = sku.number*sku.price
            })
			}else{
				alert("减不了")	
			}
        },
            // 判断商品的id在不在复选框的列表中.indexOf存在返回当前下标，不存在返回-1 == if i in []
        update_selected(sku){
            var is_exist=this.cart_checked.indexOf(sku.id)
            if(is_exist>=0){
                this.total_selected_count -= sku.number,
                this.total_selected_amount -=sku.number*sku.price
            }else{
               this.total_selected_count += sku.number,
               this.total_selected_amount +=sku.number*sku.price 
            }
        },
        get_cate(){
            create_cart_buy()
			.then(res=>{
                console.log(res)
                this.cart=res.data
                this.total_count = this.cart.length
                this.total_selected_amount += sku.number*ku.price
			})
        },
        on_delete(sku){
            var data = {"id":sku.id}
            delete_cart(data).then(res=>{
                console.log(res)
                window.location.reload()
            })
        },
        update_selected:function(cartid,index){
            
        },
        confirm_pay:function(){
            var data = {"buys_info":this.cart_checked}
            send_buy_info(data).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$router.push({path:"order"})
                }
            })
        }
    },
    created() {
        this.get_cate()
    },
}

</script>